<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
                <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
            </el-col>
            <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
                <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true">
                    <el-button style="margin: 0px 8px 0 0;" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
                    <!-- <el-form-item label="项目名称" prop="deptId">
                        <el-select clearable style="width: 150px;" v-model="queryParams.deptId" placeholder="请选择项目名称">
                            <el-option v-for="item in deptList" :key="item.id" :label="item.label" :value="item.id.toString()"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="报警时间">
                        <deatetime ref="deatetime" v-model="queryParams.time"> </deatetime>
                    </el-form-item>
                    <el-form-item label="处置状态">
                      <el-select v-model="queryParams.disposalStatus" clearable size="mini" placeholder="请选择">
                        <el-option v-for="item in dict.type.warning_disposal_status" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="预警级别">
                      <el-select v-model="queryParams.grade" clearable size="mini" placeholder="请选择">
                        <el-option v-for="item in dict.type.warning_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                        v-hasPermi="['znzlyj:earlyWarningW:query']">搜索</el-button>
                    <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
                    <div style="float: right; display: inline-block;">
                      <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                                 @click="handleDelete">删除</el-button>
                    </div>
                </el-form>


                <el-table border v-loading="loading" :data="pageTensionList" size="mini" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="40" align="center" />
                  <el-table-column label="拌合站名称" align="center" prop="stationCode" min-width="120" show-overflow-tooltip />
                  <el-table-column label="出料时间" align="center" prop="buzTime" min-width="150" show-overflow-tooltip />
                  <el-table-column label="预警项目" align="center" prop="warnItem" min-width="120" show-overflow-tooltip />
                  <el-table-column label="误差比例(%)" align="center" prop="cz" min-width="120" show-overflow-tooltip />
                  <el-table-column label="超出比例(%)" align="center" prop="outRange" min-width="120" show-overflow-tooltip />
                  <el-table-column label="预警级别" align="center" prop="grade" min-width="120" show-overflow-tooltip width="100">
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.grade == '1'" type="info">初级</el-tag>
                      <el-tag v-if="scope.row.grade == '2'" type="warning">中级</el-tag>
                      <el-tag v-if="scope.row.grade == '3'" type="danger">高级</el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column label="预警时间" align="center" prop="insterTime" min-width="150" show-overflow-tooltip width="140" />
                  <el-table-column label="预警信息" align="center" prop="remark" min-width="120" show-overflow-tooltip />
                  <!--<el-table-column label="发送状态" align="center" prop="status" show-overflow-tooltip width="100">
                      <template slot-scope="scope">
                          <el-tag v-if="scope.row.status == '0'" type="success">成功</el-tag>
                          <el-tag v-else-if="scope.row.status == '1'" type="danger">失败</el-tag>
                          <el-tag v-else type="info">未发送</el-tag>
                      </template>
                  </el-table-column>-->
                  <el-table-column label="处置状态" align="center" prop="disposalStatus" min-width="120" show-overflow-tooltip >
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.warning_disposal_status" :value="scope.row.disposalStatus" />
                    </template>
                  </el-table-column>>
                  <el-table-column label="操作" align="center" fixed="right" width="160">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text"
                                 :disabled="!( (scope.row.grade && scope.row.grade == '3') && (scope.row.disposalStatus && scope.row.disposalStatus == 1 || scope.row.disposalStatus == 2 || scope.row.disposalStatus == 5) )"
                                 @click="handleDisposal(scope.row.id)" v-hasPermi="['zhgd:nWarningSw:handle']">处置</el-button>
                      <el-button size="mini" type="text"
                                 :disabled="!( (scope.row.grade && scope.row.grade == '3') && (scope.row.disposalStatus && scope.row.disposalStatus == 3) )"
                                 @click="handleConfirm(scope.row.id)" v-hasPermi="['zhgd:nWarningSw:confirm']">确认</el-button>
                      <el-button size="mini" type="text"
                                 :disabled="!( (scope.row.grade && scope.row.grade == '3') && (scope.row.disposalStatus && scope.row.disposalStatus == 3) )"
                                 @click="handleRevoke(scope.row.id)" v-hasPermi="['zhgd:nWarningSw:withdraw']">撤回</el-button>
                      <el-button size="mini" type="text"
                                 :disabled="!( (scope.row.grade && scope.row.grade == '3') && (scope.row.disposalStatus && scope.row.disposalStatus != 1) )"
                                 @click="handleDetails(scope.row.id)" v-hasPermi="['zhgd:nWarningSw:details']">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getPageTension" />
            </el-col>
        </el-row>

      <!--处置单dialog-->
      <Disposal v-if="open" :open="open" :warningId = "warningId" ref="disposalWarning" :warningType = "5" @getList='getPageTension'  @closeDialog = 'closeDialog'/>
      <!--确认单dialog-->
      <DisposalConfirm ref="disposalConfirm" :open="confirmVisible" @getList='getPageTension'/>
      <!--详情dialog-->
      <DisposalConfirm ref="disposalDetail" :open="detalVisible" @getList='getPageTension'/>

    </div>
</template>

<script>
import workSiteLeft from "@/views/components/workSiteLeft";
import deatetime from "@/components/Datetime";
import Disposal from '@/views/zhgd/nWarningHnt/disposal.vue';
import DisposalConfirm from '@/views/zhgd/nWarningHnt/disposalConfirm.vue';

import {
    nWarningSwlqList,
    remove
} from "@/api/waterStability/earlyWarningW";
import { handleRevoke } from "@/api/zhgd/nWarningHnt";

export default {
    name: "earlyWarningWW",
    dicts: ['warning_disposal_status', 'warning_level'],
    data() {
        return {
            loading: false,
            show: true,
            rowObj: {
                T1: 3,
                T2: 24,
                T3: 21,
                T4: 24,
                F1: 0,
                F2: 0,
                F3: 24,
                F4: 24,
            },
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
              pageNum: 1,
              pageSize: 10,
              disposalStatus: '',
              grade: '',
            },
            // 接收首页跳转传过来的参数
            disposalStatus: this.$route.query.disposalStatus,
            deptList: [],
            pageTensionList: [],
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 是否显示弹出层
            open: false,
            confirmVisible:false,
            detalVisible:false,
            warningId:'',
        };
    },
    components: {
        workSiteLeft,
        deatetime,
        Disposal,
        DisposalConfirm,
    },
    created() {
        // this.getBusinessDeptTreeTop()
        this.getPageTension();
        this.handleQuery(this.queryParams.disposalStatus = this.disposalStatus);
    },
    methods: {
        // 项目名称
        // getBusinessDeptTreeTop() {
        //     businessDeptTreeTop().then((res) => {
        //         this.deptList = res.data
        //     })
        // },
        // 查询水稳预警消息列表
        getPageTension() {
            this.loading = true
            nWarningSwlqList(this.queryParams).then((res) => {
                this.pageTensionList = res.rows
                this.total = res.total;
                this.loading = false;
            })
        },
        closeDialog(){
          this.open = false;
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams = this.getSearchParams();
            this.queryParams.pageNum = 1;
            this.getPageTension()
        },
        getSearchParams() {
            const params = {};
            for (const key in this.queryParams) {
                if (key === "time") {
                    const time = this.queryParams[key];
                    if (time && time.length === 2) {
                        params.startTime = time[0];
                        params.endTime = time[1];
                    }
                } else {
                    params[key] = this.queryParams[key];
                }
            }
            return params;
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.pageNum = 1
            this.queryParams.pageSize = 10
            this.$refs.workSiteLeft.resetQuery();
            this.$refs.deatetime.startTime = null;
            this.$refs.deatetime.endTime = null;
            this.queryParams.id = '';
            this.queryParams.time = [];
            this.queryParams.disposalStatus = '';
            this.queryParams.level = '';
            this.queryParams.startTime = "";
            this.queryParams.endTime = "";
            this.resetForm("queryForm");
            this.handleQuery();
        },

        showLeft(show) {
            this.show = !show;
        },
        queryVal(val) {
            this.queryParams.id = val.id;
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.id)
          this.single = selection.length!==1
          this.multiple = !selection.length
        },
        /** 删除按钮操作 */
        handleDelete(row) {
          const ids = row.id || this.ids;
          this.$modal.confirm('是否确认删除？').then(() => {
            this.loading = true;
            return remove(ids);
          }).then(() => {
            this.loading = false;
            this.getPageTension();
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {
          }).finally(() => {
            this.loading = false;
          });
        },
      // 处置
      handleDisposal(id) {
        this.open = true;
        this.warningId = id;
        this.title = "添加预警处置信息";
        this.$nextTick(() => {
          this.$refs.disposalWarning.title = "添加预警处置信息";
          this.$refs.disposalWarning.form = {"warningId":id,"warningType":"5"}
          this.$refs.disposalWarning.getInfoByWarningId()
        })
      },
      // 确认
      handleConfirm(id) {
        this.confirmVisible=true;
        this.$refs.disposalConfirm.dialogOpen = true;
        this.$refs.disposalConfirm.title = "水稳拌合站预警处置确认"
        this.$refs.disposalConfirm.disabled = true
        this.$refs.disposalConfirm.detailsDisabled = false
        this.$refs.disposalConfirm.form = {"warningId":id,"warningType":"5"}
        this.$refs.disposalConfirm.getInfoByWarningId()
      },
      // 撤回
      handleRevoke(id) {
        this.$confirm('确认撤回？')
          .then(_ => {
            let params={
              warningType:"5",
              warningId:id,
              status:2,
              operation:"1",
            }
            handleRevoke(params).then(res=>{
              this.$message.success("撤回成功")
              this.getList()
            })
            // 调用撤回接口
          })
          .catch(_ => {});
      },
      // 详情
      handleDetails(id) {
        this.detalVisible=true;
        this.$refs.disposalDetail.dialogOpen = true;
        this.$refs.disposalDetail.title = "水稳拌合站预警处置详情"
        this.$refs.disposalDetail.disabled = true
        this.$refs.disposalDetail.detailsDisabled = true
        this.$refs.disposalDetail.form = {"warningId":id,"warningType":"5"}
        this.$refs.disposalDetail.details()
      },
    },
};
</script>
<style scoped lang="scss"></style>

